<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>技能列表</title>
    <script src="/js/axios-0.18.0.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h2>技能列表</h2>
    <div><a href="/page/addSkill.html">新增技能</a></div>
    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>技能名称</th>
                <th>类型</th>
                <th>描述</th>
                <th>冷却时间</th>
                <th>消耗</th>
                <th>所属英雄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="skillList"></tbody>
    </table>

    <script>
        $(function() {
            loadSkills();
        });

        function loadSkills() {
            axios.get('/skill')
                .then(function(response) {
                    if (!response.data) {
                        throw new Error('数据为空');
                    }
                    console.log('返回的数据:', response.data);
                    
                    const skills = response.data.data || [];
                    let html = '';
                    skills.forEach(skill => {
                        html += `
                            <tr>
                                <td>${skill.sid}</td>
                                <td>${skill.skillName || '-'}</td>
                                <td>${skill.type || '-'}</td>
                                <td>${skill.description || '-'}</td>
                                <td>${skill.cooldown || '无'}</td>
                                <td>${skill.cost || '-'}</td>
                                <td>${skill.heroInfo ? skill.heroInfo.hname : '无'}</td>
                                <td>

                                    <a href="/page/updateSkill.html?sid=${skill.sid}">修改</a>
                                    <button onclick="deleteSkill(${skill.sid})">删除</button>
                                </td>
                            </tr>`;
                    });
                    $("#skillList").html(html || '<tr><td colspan="8" style="text-align:center">暂无数据</td></tr>');
                })
                .catch(function(error) {
                    console.error('获取数据失败:', error);
                    if (error.response) {
                        console.log('错误响应:', error.response);
                    }
                    $("#skillList").html('<tr><td colspan="8" style="text-align:center;color:red">加载失败，请稍后重试</td></tr>');
                });
        }

        function deleteSkill(sid) {
            if(!confirm('确定要删除这个技能吗？')) {
                return;
            }
            axios.delete(`/skill/${sid}`)
                .then(function(response) {
                    if(response.data.code === 200) {
                        alert('删除成功');
                        loadSkills();
                    } else {
                        alert('删除失败：' + response.data.msg);
                    }
                })
                .catch(function(error) {
                    console.error('删除失败:', error);
                    alert('删除失败，请稍后重试');
                });
        }
    </script>
</body>
</html> 